<template>
  <div>
    <el-form
      :label-width="formConfig.labelWidth || ''"
      :inline="formConfig.inline || true"
      :size="formConfig.size || 'small'"
      :ref="formConfig.ref"
      :model="searchData"
    >
      <el-form-item
        v-for="item in searchForm.formData"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :class="item.class ? item.class : ''"
        :rules="item.rules"
      >
        <!-- slot field -->
        <template v-if="item.isSlot">
          <slot :name="item.prop" :item="item"></slot>
        </template>
        <template v-else>
          <!-- input field -->
          <el-input
            v-if="item.type === 'Input'"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            :suffix-icon="item.icon || ''"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          ></el-input>
          <!-- select field -->
          <el-select
            v-if="item.type === 'Select'"
            style="width: 100%"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            :disabled="item.disabled"
            :multiple="item.multiple"
            :collapse-tags="item.collapseTags"
            :multiple-limit="item.multipleLimit"
            :filterable="item.filterable"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          >
            <el-option
              v-for="(opItem, index) in item.options"
              :key="index"
              :label="item.sysKeys ? opItem[item.sysKeys.label] : opItem.label"
              :value="item.sysKeys ? opItem[item.sysKeys.value] : opItem.value"
            ></el-option>
          </el-select>
          <!-- select options field -->
          <el-select
            v-if="item.type === 'SelectOptions'"
            style="width: 100%"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            :disabled="item.disabled"
            :multiple="item.multiple"
            :collapse-tags="item.collapseTags"
            :multiple-limit="item.multipleLimit"
            :filterable="item.filterable"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          >
            <el-option-group
              v-for="group in item.options"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
          <!-- date field -->
          <el-date-picker
            v-if="item.type === 'Date'"
            :style="item.style ? item.style : 'width: 100%'"
            :type="item.isDateType || 'date'"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          ></el-date-picker>
          <!-- radio field -->
          <el-radio-group
            v-if="item.type === 'Radio'"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          >
            <el-radio
              v-for="(opItem, index) in item.options"
              :label="opItem.label"
              :key="index"
              :rules="item.rules"
            ></el-radio>
          </el-radio-group>
          <!-- checkbox field -->
          <el-checkbox-group
            v-if="item.type === 'Checkbox'"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          >
            <el-checkbox
              v-for="(opItem, index) in item.options"
              :label="opItem.label"
              :key="index"
              :rules="item.rules"
            ></el-checkbox>
          </el-checkbox-group>
          <!-- textarea field -->
          <el-input
            v-if="item.type === 'Textarea'"
            type="textarea"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          ></el-input>
          <!-- switch field -->
          <el-switch
            v-if="item.type === 'Switch'"
            v-model="searchData[item.prop]"
            :clearable="item.clearable || true"
            :active-color="variables.switchActiveColor"
            :inactive-color="variables.switchInactiveColor"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          ></el-switch>
          <!-- cascader field -->
          <el-cascader
            v-if="item.type === 'Cascader'"
            v-model="searchData[item.prop]"
            :placeholder="item.placeholder"
            :options="item.options"
            :props="item.props"
            :show-all-levels="item.showAllLevels"
            :collapse-tags="item.collapseTags"
            @change="searchForm.changeMethod && searchForm.changeMethod()"
          ></el-cascader>
        </template>
      </el-form-item>
      <!-- 操作 -->
      <el-form-item class="buttons-content">
        <el-button
          v-for="el in searchAction"
          :key="el.label"
          :type="el.type"
          :plain="el.plain || false"
          :class="`${el.class}` || ''"
          :size="formConfig.size || 'small'"
          :icon="el.icon || ''"
          @click="el.handle()"
          >{{ el.label }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import variables from "@/assets/scss/common.scss";
export default {
  props: {
    searchForm: {
      type: Object,
      default: () => ({}),
    },
    searchData: {
      type: Object,
      default: () => ({}),
    },
    formConfig: {
      type: Object,
      default: () => ({}),
    },
    searchAction: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    variables() {
      return variables;
    },
  },
};
</script>

<style></style>
